<template>
  <view class="home">
    <view class="hometext">首页</view>
    <scroll-view class="workbench" scroll-y>
      <view class="header">
        <view class="xttext">综合·集约·精细</view>
        <view class="citext">上海石洞口煤气安全生产智能化管控平台</view>
      </view>
      <view class="workbench-total" v-hasPermi="['app-yhzl', 'app-pcrw', 'app-yhdj', 'app-yhzg', 'app-zxjc']">
        <view class="workbench-total-box" v-hasPermi="['app-yhzl', 'app-pcrw']">
          <view class="totalTitle">我的任务</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ totalData.rwDai }}</view>
              <view class="totalList-title">待排查任务</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ totalData.rwChao }}</view>
              <view class="totalList-title">超期未排查任务</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.rwWan }}</view>
              <view class="totalList-title">已排查任务</view>
            </view>
          </view>
        </view>
        <view class="workbench-total-box" v-hasPermi="['app-yhdj', 'app-yhzg']">
          <view class="totalTitle">我的隐患</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ totalData.yhDai }}</view>
              <view class="totalList-title">待整改隐患</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ totalData.yhChao }}</view>
              <view class="totalList-title">超期未整改隐患</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.yhWan }}</view>
              <view class="totalList-title">发现未整改隐患</view>
            </view>
          </view>
          <view class="totalList" style="margin-top: 20upx;">
            <view class="totalList-item">
              <view class="totalList-num">{{ totalData.yhdsh }}</view>
              <view class="totalList-title">待审核隐患</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ totalData.yhdfh }}</view>
              <view class="totalList-title">待复核隐患</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.yhzs }}</view>
              <view class="totalList-title">隐患总数</view>
            </view>
          </view>
        </view>
      </view>
      <view v-for="(item, index) in yhpcList" :key="item.title" class="workbench-card" v-hasPermi="item.per"
        style="margin-bottom: 24upx">
        <view class="workbench-card__header">
          <image class="workbench-title__icon" :src="`../../static/${item.icon}.svg`" mode=""></image>
          {{ item.title }}
        </view>
        <view class="workbench-card__body">
          <view v-for="(cItem, cIndex) of item.children" :key="cIndex" class="workbench-item" v-hasPermi="cItem.per">
            <view class="workbench-item__inner" @click="handRouter(cItem)">
              <view class="workbench-item__icon">
                <image class="workbench-item__icon_uni" :src="`../../static/${cItem.icon}.svg`" mode=""></image>
              </view>
              <view class="workbench-item__title">{{ cItem.title }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="workbench-total" v-hasPermi="['app-xjrw']">
        <view class="workbench-total-box">
          <view class="totalTitle">我的巡检</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ totalData.xjDai }}</view>
              <view class="totalList-title">待巡检任务</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ totalData.xjChao }}</view>
              <view class="totalList-title">超期未巡检任务</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.xjWan }}</view>
              <view class="totalList-title">已巡检任务</view>
            </view>
          </view>
        </view>
      </view>
      <view v-for="(item, index) of list" :key="index" class="workbench-card" v-hasPermi="item.per"
        style="margin-bottom: 24upx">
        <view class="workbench-card__header">
          <image class="workbench-title__icon" :src="`../../static/${item.icon}.svg`" mode=""></image>
          {{ item.title }}
        </view>
        <view class="workbench-card__body">
          <view v-for="(cItem, cIndex) of item.children" :key="cIndex" class="workbench-item" v-hasPermi="cItem.per">
            <view class="workbench-item__inner" @click="handRouter(cItem)">
              <view class="workbench-item__icon">
                <image class="workbench-item__icon_uni" :src="`../../static/${cItem.icon}.svg`" mode=""></image>
              </view>
              <view class="workbench-item__title">{{ cItem.title }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="workbench-total" v-hasPermi="['app-zysb', 'app-zyxk']">
        <view class="workbench-total-box">
          <view class="totalTitle">我的作业</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ totalData.ysq }}</view>
              <view class="totalList-title">已申请</view>
            </view>
            <view class="totalList-item2" @click="fLinkMydq">
              <view class="totalList-num2">{{ totalData.dq }}</view>
              <view class="totalList-title">待签</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.yq }}</view>
              <view class="totalList-title">已签</view>
            </view>
          </view>
        </view>
      </view>
      <view v-for="(item, index) of zyList" :key="index" class="workbench-card" v-hasPermi="item.per"  style="margin-bottom: 24upx">
        <view class="workbench-card__header">
          <image class="workbench-title__icon" :src="`../../static/${item.icon}.svg`" mode=""></image>
          {{ item.title }}
        </view>
        <view class="workbench-card__body">
          <view v-for="(cItem, cIndex) of item.children" :key="cIndex" class="workbench-item" v-hasPermi="cItem.per">
            <view class="workbench-item__inner" @click="handRouter(cItem)">
              <view class="workbench-item__icon">
                <image class="workbench-item__icon_uni" :src="`../../static/${cItem.icon}.svg`" mode=""></image>
              </view>
              <view class="workbench-item__title">{{ cItem.title }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="workbench-total" v-hasPermi="['app-zysb', 'app-zyxk']">
        <view class="workbench-total-box">
          <view class="totalTitle">SIS审批</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ !totalData.isApproval? totalData.sissq :totalData.sisdp  }}</view>
              <view class="totalList-title">{{!totalData.isApproval? '我的申请':'我的待批'}}</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ totalData.sisqc }}</view>
              <view class="totalList-title">SIS切除</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ totalData.sishf }}</view>
              <view class="totalList-title">SIS恢复</view>
            </view>
          </view>
        </view>
      </view>
      <view v-for="(item, index) of sisList" :key="index" class="workbench-card" v-hasPermi="item.per">
        <view class="workbench-card__header">
          <image class="workbench-title__icon" :src="`../../static/${item.icon}.svg`" mode=""></image>
          {{ item.title }}
        </view>
        <view class="workbench-card__body">
          <view v-for="(cItem, cIndex) of item.children" :key="cIndex" class="workbench-item" v-hasPermi="cItem.per">
            <view class="workbench-item__inner" @click="handRouter(cItem)">
              <view class="workbench-item__icon">
                <image class="workbench-item__icon_uni" :src="`../../static/${cItem.icon}.svg`" mode=""></image>
              </view>
              <view class="workbench-item__title">{{ cItem.title }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="workbench-total" style="margin-top: 22upx">
        <view class="workbench-total-box">
          <view class="totalTitle">我的发货</view>
          <view class="totalList">
            <view class="totalList-item">
              <view class="totalList-num">{{ statData.expectTotal  }}</view>
              <view class="totalList-title">预计发货</view>
            </view>
            <view class="totalList-item2">
              <view class="totalList-num2">{{ statData.sendTotal }}</view>
              <view class="totalList-title">当日总发货</view>
            </view>
            <view class="totalList-item3">
              <view class="totalList-num3">{{ statData.unSendTotal }}</view>
              <view class="totalList-title">待发货</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 一企一品一码 更换图标 -->
      <view v-for="(item, index) of yiqiyipinList" :key="index" class="workbench-card" v-hasPermi="item.per">
        <view class="workbench-card__header">
          <image class="workbench-title__icon" :src="`../../static/${item.icon}.svg`" mode=""></image>
          {{ item.title }}
        </view>
        <view class="workbench-card__body">
          <view v-for="(cItem, cIndex) of item.children" :key="cIndex" class="workbench-item yiqiyipin-item" v-hasPermi="cItem.per">
            <view class="workbench-item__inner" @click="handRouter(cItem)">
              <view class="workbench-item__icon">
                <image class="workbench-item__icon_uni" :src="`../../static/${cItem.icon}.svg`" mode=""></image>
              </view>
              <view class="workbench-item__title">{{ cItem.title }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="popup">
        <view class="title">追溯操作</view>
        <!-- <view class="btn" @click="fLink('carSign')">运单登记</view> -->
        <view class="btn" @click="fLink('sendBusinessAdd')">发货</view>
        <view class="btn" @click="fLink('receiveBusinessAdd')">收货</view>
        <view class="btn" @click="fLink('toSend')">退货(发货)</view>
        <view class="btn" @click="fLink('toReceive')">退货(收货)</view>
      </view>
    </uni-popup>
    <UniFoot type="userhome" />
  </view>
</template>

<script setup>
  import {
    ref,
    nextTick,
    onMounted
  } from "vue";
  import {
    router
  } from "@/router/index.js";
  import UniFoot from "@/components/uni-foot.vue";
  import {
    useAuthStore
  } from "@/store/modules/auth.js";
  import {
    apis as APIS
  } from "@/api/home.js";
  const authStore = useAuthStore();
  const yhpcList = ref([{
    title: "双重预防",
    per: ["app-yhdj", "app-yhzg", "app-yhzl", "app-pcrw", "app-zxjc"],
    children: [{
        icon: "yhdj",
        per: ["app-yhdj"],
        title: "隐患登记",
        path: "/pages/yhpc/yhdj/index",
      },
      {
        icon: "wtzg",
        title: "隐患整改",
        per: ["app-yhzg"],
        path: "/pages/yhpc/yhzg/index",
      },
      {
        icon: "yhrw",
        title: "排查治理",
        per: ["app-yhzl"],
        path: "/pages/yhpc/pcjh/pcrw",
      },
      {
        icon: "yhzl",
        title: "排查任务",
        per: ["app-pcrw"],
        path: "/pages/yhpc/pcjhrw/index",
      },
	  {
	    icon: "zxjc",
	    title: "专项检查",
	    per: ["app-zxjc"],
	    path: "/pages/zxjc/jcrw/index",
	  },
    ],
  }, ]);
  const list = ref([{
    title: "智能巡检",
    per: ["app-xjrw"],
    children: [{
      icon: "znxj",
      path: "/pages/znxj/xjrw/index",
      title: "巡检任务",
      per: ["app-xjrw"],
    }, ],
  }, ]);
  const zyList = ref([{
    title: "作业管理",
    per: ["app-zysb", "app-zyxk"],

    children: [{
        icon: "zysb",
        path: "/pages/zygl/zysb/index",
        title: "作业申报",
        per: ["app-zysb"],
      },
      {
        icon: "code",
        per: ["app-zyxk"],
        path: "/pages/zygl/zyxkbl/index",
        title: "作业许可",
      },
      {
        icon: "dq",
        per: ["app-zyxk"],
        path: "/pages/zygl/zyxkbl/mydq",
        title: "我的待签",
      },
    ],
  }, ]);

  const sisList = ref([{
    title: "SIS管理",
    icon: "sis",
    per: ["app-sisqc", 'app-sishf', 'app-sisdp'],
    children: [{
        icon: "sisqc",
        per: ["app-sisqc"],
        path: "/pages/sis/add",
        title: "SIS切除",
      },
      {
        icon: "sishf",
        per: ["app-sishf"],
        path: "/pages/sis/hf",
        title: "SIS恢复",
      },
      {
        icon: "wddq",
        per: ["app-sisdp"],
        path: "/pages/sis/mysp",
        title: "我的待批",
      },
      {
        icon: "wdsq",
        per: ["app-sisqc", 'app-sishf'],
        path: "/pages/sis/mysq",
        title: "我的申请",
      },
      {
        icon: "sisqd",
        per: ["app-sisqd"],
        path: "/pages/sis/list",
        title: "SIS清单",
      },
    ],
  }, ])

  const yiqiyipinList = ref([{
    title: "追溯系统",
    icon: "zygl",
    per: ["app-sisqc", 'app-sishf', 'app-sisdp'],
    children: [{
        icon: "wxhxp",
        per: ["app-sisqc"],
        path: "/pages/yiqiyipin/dangerousInfo",
        title: "危化品信息",
      },
      {
        icon: "zscz",
        per: ["app-sishf"],
        path: "/pages/yiqiyipin/traceabilityOperation",
        title: "追溯操作",
      },
      {
        icon: "crk",
        per: ["app-sisdp"],
        path: "/pages/yiqiyipin/carInout",
        title: "出入库记录",
      },
      {
        icon: "yddj",
        per: ["app-sisdp"],
        path: "/pages/yiqiyipin/carSign",
        title: "运单登记",
      }
    ],
  }, ])

  const totalData = ref({
    rwDai: "",
    rwChao: "",
    rwWan: "",
    yhDai: "",
    yhChao: "",
    yhWan: "",
    xjDai: "",
    xjChao: "",
    xjWan: "",
    ysq: "",
    dq: "",
    sissq: '',
    sisdp: '',
    sisqc: '',
    sishf: '',
    isApproval: '',
  });

  const popup = ref();

  const handRouter = (item) => {
	  console.log('item: ', item);
    if(item.title == '追溯操作'){
      popup.value.open("bottom");
    } else{
      router.toPage({
        path: item.path,
      });
    }
  };

  const fLink = (path) => {
    router.toPage({
      path: `/pages/yiqiyipin/${path}`
    });
    popup.value.close();
  }

  // 我的待签
  const fLinkMydq  = () => {
    router.toPage({
      path: `/pages/zygl/zyxkbl/mydq`
    });
  }

  // 一企一品统计数据
  const statData = ref({})
  const getStatTotal = () => {
    APIS.statTotal().then((res) => {
      statData.value = res.data
    })
  }
  getStatTotal()

  const getTotal = () => {
    APIS.preventionCheckTask().then((res) => {
      totalData.value.rwDai = res.data.dai;
      totalData.value.rwChao = res.data.chao;
      totalData.value.rwWan = res.data.wan;
    });
    APIS.preventionHiddenRegister().then((res) => {
      totalData.value.yhDai = res.data.dai;
      totalData.value.yhChao = res.data.chao;
      totalData.value.yhWan = res.data.wei;
      totalData.value.yhdsh = res.data.shen;
      totalData.value.yhdfh = res.data.fu;
      totalData.value.yhzs = res.data.zong;

    });
    APIS.inspectionPlanTask().then((res) => {
      totalData.value.xjDai = res.data.dai;
      totalData.value.xjChao = res.data.chao;
      totalData.value.xjWan = res.data.wan;
    });
    APIS.jobcount().then((res) => {
      totalData.value.ysq = res.data.apply;
      totalData.value.dq = res.data.signed;
      totalData.value.yq = res.data.sign;
    });

    APIS.sisCount().then((res) => {
      console.log('res: ', res)
      totalData.value.sissq = res.data.myApplyCount;
      totalData.value.sisdp = res.data.myApproveCount;
      totalData.value.sisqc = res.data.resectionCount;
      totalData.value.sishf = res.data.recoveryCount;
      totalData.value.isApproval = res.data.isApproval;
    })
  };
  onMounted(() => {
    getTotal();
    list.value = [];
    yhpcList.value = [];
    nextTick().then(() => {
      authStore.getInfo().then(() => {
        yhpcList.value = [{
          title: "双重预防",
          icon: "scyf",
          per: ["app-yhdj", "app-yhzg", "app-yhzl", "app-pcrw", "app-zxjc"],
          children: [{
              icon: "yhdj",
              per: ["app-yhdj"],
              title: "隐患登记",
              path: "/pages/yhpc/yhdj/index",
            },
            {
              icon: "wtzg",
              title: "隐患整改",
              per: ["app-yhzg"],
              path: "/pages/yhpc/yhzg/index",
            },
            {
              icon: "yhrw",
              title: "排查治理",
              per: ["app-yhzl"],
              path: "/pages/yhpc/pcjh/pcrw",
            },
            {
              icon: "yhzl",
              title: "排查任务",
              per: ["app-pcrw"],
              path: "/pages/yhpc/pcjhrw/index",
            },
            {
              icon: "zxjc",
              title: "专项检查",
              per: ["app-zxjc"],
              path: "/pages/zxjc/jcrw/index",
            },
          ],
        }, ];
        list.value = [{
          title: "智能巡检",
          icon: "znxj2",
          per: ["app-xjrw"],
          children: [{
            icon: "xjrw",
            path: "/pages/znxj/xjrw/index",
            title: "巡检任务",
            per: ["app-xjrw"],
          }, ],
        }, ];
        zyList.value = [{
            title: "作业管理",
            icon: "zygl",
            per: ["app-zysb", "app-zyxk"],
            children: [{
                icon: "zysb",
                path: "/pages/zygl/zysb/index",
                title: "作业申报",
                per: ["app-zysb"],
              },
              {
                icon: "code",
                per: ["app-zyxk"],
                path: "/pages/zygl/zyxkbl/index",
                title: "作业许可",
              },
              {
                icon: "dq",
                per: ["app-zyxk"],
                path: "/pages/zygl/zyxkbl/mydq",
                title: "我的待签",
              },
            ],
          },

        ];
        sisList.value = [{
          title: "SIS管理",
          icon: "sis",
          per: ["app-sisqc", 'app-sishf', 'app-sisdp'],
          children: [{
              icon: "sisqc",
              per: ["app-sisqc"],
              path: "/pages/sis/add",
              title: "SIS切除",
            },
            {
              icon: "sishf",
              per: ["app-sishf"],
              path: "/pages/sis/hf",
              title: "SIS恢复",
            },
            {
              icon: "wddp",
              per: ["app-sisdp"],
              path: "/pages/sis/mysp",
              title: "我的待批",
            },
            {
              icon: "wdsq",
              per: ["app-sisqc", 'app-sishf'],
              path: "/pages/sis/mysq",
              title: "我的申请",
            },
            {
              icon: "sisqd",
              per: ["app-sisqd"],
              path: "/pages/sis/list",
              title: "SIS清单",
            },
          ],
        }, ]

        // 更换图标
        yiqiyipinList.value = [{
          title: "追溯系统",
          icon: "yqyp",
          per: ["app-sisqc", 'app-sishf', 'app-sisdp'],
          children: [{
            icon: "wxhxp",
            per: ["app-sisqc"],
            path: "/pages/yiqiyipin/dangerousInfo",
            title: "危化品信息",
          },
          {
            icon: "zscz",
            per: ["app-sishf"],
            path: "/pages/yiqiyipin/traceabilityOperation",
            title: "追溯操作",
          },
          {
            icon: "crk",
            per: ["app-sisdp"],
            path: "/pages/yiqiyipin/carInout",
            title: "出入库记录",
          },
          {
            icon: "yddj",
            per: ["app-sisdp"],
            path: "/pages/yiqiyipin/carSign",
            title: "运单登记",
          }
          ],
        }, ]
      });
    });
  });
</script>

<style lang="scss" scoped>
  .workbench {
    box-sizing: border-box;
    padding-bottom: 24rpx;

    &-title__icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 14rpx;
      margin-left: 16rpx;
    }

    &-card {
      width: 94%;
      // height: 261rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
      margin: 24rpx auto 0;
      border: 1px solid #fff;

      // background-color: $uni-bg-color;
      // box-shadow: 0px 0px 20upx 0px rgba(0, 0, 0, 0.2);
      &__header {
        height: 50rpx;
        display: flex;
        align-items: center;
        color: #333;
        font-family: PingFang SC;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-top: 16rpx;
      }

      &__body {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10rpx;
      }
    }

    &-item {
      // margin-right: 24rpx;
      width: 25%;
      box-sizing: border-box;

      &__inner {
        margin: 0 auto;
        width: 150rpx;
        height: 171rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: $uni-spacing-col-base $uni-spacing-row-base;
      }

      &__icon {
        width: 88rpx;
        height: 88rpx;
        // background-color: #eee;
        text-align: center;
        border-radius: 50%;

        &_uni {
          width: 88rpx;
          height: 88rpx;
          font-size: $uni-img-size-lg !important;
          color: skyblue;
        }
      }

      &__title {
        // margin-top: $uni-spacing-col-sm;
        padding-top: 10rpx;
        color: #333;
        text-align: center;
        font-family: Microsoft YaHei;
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1.2rpx;
      }
    }
  }

  .home {
    width: 100vw;
    height: 100vh;
    background: url("../../static/images/homeBg.png") no-repeat;
    background-size: 100%;
    padding-top: 50rpx;
  }

  .hometext {
    width: 100%;
    height: 64rpx;
    color: #fff;
    text-align: center;
    line-height: 64rpx;
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 1.3rpx;
  }

  .header {
    width: 100%;
    height: 194rpx;

    .xttext {
      color: #fff;
      font-size: 50rpx;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: 400;
      margin-top: 43rpx;
      margin-left: 24rpx;
    }

    .citext {
      color: #fff;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-style: normal;
      font-weight: 400;
      margin-top: 24rpx;
      margin-left: 24rpx;
    }
  }

  .workbench {
    width: 100%;
    height: calc(100vh - 164rpx - 50rpx);

    &-total {
      width: 94%;
      padding-bottom: 20upx;
      // height: 694rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0rpx 0rpx 18rpx 0px rgba(0, 0, 0, 0.05);
      margin: 0 auto 24upx;

      &-box {
        margin-bottom: 8rpx;
      }
    }

    .totalTitle {
      color: #333;
      font-size: 30rpx;
      font-family: PangMenZhengDao-3;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      letter-spacing: 1.5rpx;
      margin-left: 18rpx;
      margin-bottom: 16rpx;
      padding-top: 24rpx;
    }

    .totalList {
      padding: 0 18rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &-item,
      &-item2,
      &-item3 {
        width: 203rpx;
        height: 137rpx;
        border-radius: 16rpx;
        background: rgba(38, 145, 243, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      &-item2 {
        background: rgba(215, 77, 88, 0.1);
      }

      &-item3 {
        background: rgba(23, 191, 41, 0.1);
      }

      &-num,
      &-num2,
      &-num3 {
        color: #2691f3;
        text-align: center;
        font-size: 50rpx;
        font-family: D-DIN;
        font-style: normal;
        font-weight: 700;
      }

      &-title {
        color: #333;
        text-align: center;
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 1.2rpx;
        opacity: 0.5;
      }

      &-num2 {
        color: #f34b26;
      }

      &-num3 {
        color: #22cd48;
      }
    }
  }

.yiqiyipin-item{
  width: 25% !important;
  padding-top: 10px;
}

.yiqiyipin-item .workbench-item__inner{
  width: auto !important;
}

.popup{
  padding: 20upx 80upx;
  background: #fff;

  .title{
    font-size: 30upx;
    font-weight: 500;
    padding: 8upx 0 40upx 0;
    text-align: center;
  }

  .btn{
    height: 80upx;
    line-height: 80upx;
    text-align: center;
    border-radius: 80upx;
    margin-bottom: 20upx;
    border: 1upx solid #999;
  }
}
</style>
